<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生统计表</title>

</head>
<style>

    .hender p {
        padding-bottom: 60px;
    }

    h1 {
        padding-top: 60px;
        font-size: 60px;
        text-align: center;
        margin: 0;
    }

    h3 {
        font-size: 30px;
    }

    p {
        text-align: center;
    }

    #s {
        padding: 5px 10px;
        width: 260px;
    }

    .container {
        width: 1100px;
        margin: auto;
    }

    input {
        padding: 5px 10px;
        width: 260px;
    }

    #btn {
        padding: 5px 10px;
        width: 120px;
    }

    section {
        height: 10px;
    }

    li {
        list-style: none;
    }

    #list span {
        width: 33.333333%;
        float: left;
    }

    h4 {

        margin-left: 80px;
    }

    .lei ul li {
        float: left;
        width: 33.33333%;
        text-align: left;
        margin-bottom: 15px;
    }

    .lei ul#list li {
        width: 100%;
    }

    .lei {
        margin-left: 80px;
    }

    .lei ul {
        text-align: left;
        margin-left: -40px;
    }

    .top {
        margin-left: 80px;
    }

    .hender {
        background: #40e9ff;
    }

    body {
        margin: 0;
        background: #b6f3ff;
    }

</style>
<body>


<div class="hender">
    <h1>学员信息表</h1>
    <p>1804班</p>
</div>

<div class="top">
    <div class="container">

        <h3>添加</h3>
        <input type="text" id="n" placeholder="姓名"/>
        <select id="s">
            <option value="男">男</option>
            <option value="女">女</option>
        </select>
        <input type="number" placeholder="年龄" id="a"/>

        <button id="btn">添加</button>

    </div>
</div>


<div class="lei">
    <div class="container">
        <h3>列表</h3>

        <ul>
            <li>姓名</li>
            <li>性别</li>
            <li>年龄</li>
        </ul>

        <ul id="list">

        </ul>
    </div>
</div>
</body>

<script type="text/javascript">
    document.querySelector("#btn").addEventListener("click", function () {
        var n = document.querySelector("#n").value;
        console.log(n);
        var s = document.querySelector("#s").value;
        console.log(s);
        var a = document.querySelector("#a").value;
        console.log(a);

        var xmlhttp;
        if (window.XMLHttpRequest) {
            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            xmlhttp = new XMLHttpRequest();
        } else {
            // IE6, IE5 浏览器执行代码
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

                loadXMLDoc();
                //document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET", "http://localhost/ajaxApi/public/index.php/index/student/addStudent?studentName=" + n + "&sex=" + s + "&age=" + a, true);
        xmlhttp.send();

    })


    function loadXMLDoc() {
        var xmlhttp;
        if (window.XMLHttpRequest) {
            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            xmlhttp = new XMLHttpRequest();
        } else {
            // IE6, IE5 浏览器执行代码
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

                var json = JSON.parse(xmlhttp.responseText);
                console.log(json);
                json = json.data.reverse();
                list.innerHTML = '';

                for (let i = 0; i < json.length; i++) {
                    var li = document.createElement('li');

                    var spanName = document.createElement('span');
                    spanName.innerHTML = json[i].studentName;

                    var spanSex = document.createElement('span');
                    spanSex.innerHTML = json[i].sex;
                    var spanAge = document.createElement('span');
                    spanAge.innerHTML = json[i].age;


                    li.appendChild(spanName);
                    li.appendChild(spanSex);
                    li.appendChild(spanAge);

                    document.querySelector('#list').appendChild(li);
                }

                //document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
            }
        };
        xmlhttp.open("GET", "http://localhost/ajaxApi/public/index.php/index/student/student", true);
        xmlhttp.send();

        n.value = '';
        a.value = '';
    }
    loadXMLDoc();

</script>
</body >
</html>